<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th {
            border: 1px solid black;
            width: 20%;
            border-bottom: 1px solid #000;
        }

        table {
            border: 1px solid black;
            text-align: center;
        }

        td {

            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="app">
        <table>
            <tr>
                <th>ID</th>
                <th>名字</th>
                <th>时间</th>
                <th>查询</th>
            </tr>
            <tr>
                <td>
                    id: <input type="text" v-model="id">
                </td>
                <td>
                    name: <input type="text" v-model="name" @keyup.enter='ck'>
                </td>

                <td><a href="#" @click='ck'>添加</a></td>
                <td>查询
                    <input type="text" v-model="ke">
                </td>
            </tr>
            <tr v-for="item in search(ke)" :key='item.id'>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time}}</td>
                <td><a href="#" @click='del(id)'>删除</a></td>
            </tr>
            <td>{{msg | msga | msgg}}</td>
        </table>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    Vue.filter('msga', function (msg) {
        return msg.replace(/单纯/g, '邪恶')
    })
    Vue.filter('msgg', function (msg, arg) {
        return msg.replace(/我/g, '你')
    })
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                msg: '我是一个单纯的人,单纯的男孩',
                ke: '',
                id: '',
                name: '',
                list: [
                    { id: 1, name: '魏建新', time: new Date().toString() },
                    { id: 2, name: '胡巧', time: new Date().toString() },
                ]
            }
        },
        methods: {
            ck() {
                this.list.push({ id: this.id, name: this.name, time: new Date() })
                this.id = '',
                    this.name = ''
            },
            del(id) {
                let index = this.list.findIndex(item => {
                    if (this.id == id) {
                        return true
                    }
                })
                this.list.splice(index, 1)
            },
            search(ke) {
                let lii = [];
                this.list.forEach(item => {
                    if (item.name.indexOf(ke) != -1) {
                        lii.push(item)
                    }
                })
                return lii
            }

        },
    })
</script>

</html>